<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>瑞州支付</title>
	<link rel="stylesheet"  href="css/jquery.mobile-1.2.0.css" />
	<style type="text/css">
		body{font-size:14px;}
		.red{
			color:red;
		}
		.intro{
			color:#999;
		}
	</style>
	<script src="js/jquery.js"></script>
	<script src="js/jquery.mobile-1.2.0.js"></script>
	<script type="text/javascript">
		var check = false;
		var	Price = 0;
		var item_name ="";
		//接收商品信息
		$(function(){
			try{
				var OrderInfoJsonData = window.JsGameCenter.getOrderInfo();
			} catch(e) {
				$("#wrongOrder_popup").popup("open");
				setTimeout("closePopup('#wrongOrder_popup')",2000);
				window.JsGameCenter.closeWebView();
			}
			
			var orderInfo = eval('('+OrderInfoJsonData+')');
			var orderInfo = eval('('+OrderInfoJsonData+')');

			$("#MerId").val(orderInfo.MerId);
			$("#OrderId").val(orderInfo.OrderId);
			$("#ProdName").val(orderInfo.ProdName);
			$(".product_name").html(orderInfo.ProdName);
			$("#EncString").val(orderInfo.EncString);
			$("#NoticeUrl").val(orderInfo.NoticeUrl);
			$("#AccountNo").val(orderInfo.AccountNo);
			Price 	  = orderInfo.Price; 
			item_name = orderInfo.ItemName;
			if(Price!=-1){
				$("#item_price").show();
				$(".item_price").html(Price);
			}
			if(item_name!=""){
				$("#item_name").show();
				$(".item_name").html(item_name);
			
			}
		});

		$(function(){
			$('#form').submit(function(){
				if(!checkInputData()){
					return false;
				}
				showLoader("正在支付,请稍后...");
			});
		});
		function closePopup(eleStr){
			$(eleStr).popup("close")
		}
		function checkInputData(){
			if(Price!=-1){
				var card_price = $("input[name='Price']:checked").val();
				if(parseInt(card_price)<parseInt(Price)){
					$("#errorPrice_popup").find("p").html("充值卡的面额不能小于"+Price+"元");
					$("#errorPrice_popup").popup("open");
					setTimeout("closePopup('#errorPrice_popup')",2000);
					return false;
				}
			}

			if(!$('input:radio[name="Price"]').is(":checked")){
				$("#carddeno_popup").popup("open");
				setTimeout("closePopup('#carddeno_popup')",2000);
				return false;
			}
			if($("#card_no").val().replace(/(^\s*)|(\s*$)/g, "")==""){
				$("#card_popup").popup("open");
				setTimeout("closePopup('#card_popup')",2000);
				return false;
			}
			if(/\D/.test($("#card_no").val())){
				$("#wrongCardNo_popup").popup("open");
				setTimeout("closePopup('#wrongCardNo_popup')",2000);
				return false;
			}
			if(/\D/.test($("#card_password").val())){
				$("#wrongCardPs_popup").popup("open");
				setTimeout("closePopup('#wrongCardPs_popup')",2000);
				return false;
			}
			if($("#card_password").val().replace(/(^\s*)|(\s*$)/g, "")==""){
				$("#password_popup").popup("open");
				setTimeout("closePopup('#password_popup')",2000);
				return false;
			}
			if($("#card_no").val().length != 15){
				$("#shortCardNo_popup").popup("open");
				setTimeout("closePopup('#shortCardNo_popup')",2000);
				return false;
			}
			if($("#card_password").val().length != 19){
				$("#shortCardPs_popup").popup("open");
				setTimeout("closePopup('#shortCardPs_popup')",2000);
				return false;
			}
			return true;
		}
	</script>
	<script type="text/javascript">
		//显示加载器
		function showLoader(str) {
			$.mobile.loading('show', {
				text: str, 			//加载器中显示的文字
				textVisible: true, //是否显示文字
				theme: 'a',         //加载器主题样式a-e
				textonly: false,   //是否只显示文字
				html: ""             //要显示的html内容，如图片等
			});
		}
	</script>
</head>
<body>
<div data-role="page" data-theme="d">
	<div data-role="header" data-theme="b" data-position="fixed">
		<h1>联通卡充值</h1>
	</div>
	<div data-role="content">
		你选择的游戏： <span class="red product_name" ></span> <br />
		<div id="item_name" style="display:none;">道 具 名 称&nbsp;&nbsp;&nbsp;&nbsp;： <span class="red item_name" ></span></div>
		充 值 方 式&nbsp;&nbsp;&nbsp;&nbsp;：<span class="red">联通充值卡</span>
		<div id="item_price" style="display:none;">充 值 金 额&nbsp;&nbsp;&nbsp;&nbsp;： <span class="red item_price" ></span></div>
		<br />
		<form id="form" action="http://210.83.86.176/mpay/index.php/pay" method="post" id="form">
		<fieldset data-role="controlgroup" id="unicomTcd">
			<legend>选择充值卡面额:</legend>
			<input  type="radio" class="cd" name="Price" value="20" id="c2">
			<label for="c2" class="c2 cd"  data-theme="c">20元</label>
			<input type="radio" class="cd" name="Price" value="30" id="c3">
			<label for="c3" class="c3 cd"  data-theme="c">30元</label>
			<input type="radio" class="cd" name="Price" value="50" id="c4">
			<label for="c4" class="c4 cd"  data-theme="c">50元</label>
			<input type="radio" class="cd" name="Price" value="100" id="c5">
			<label for="c5" class="c5 cd"  data-theme="c">100元</label>
			<input type="radio" class="cd" name="Price" value="300" id="c7">
			<label for="c7" class="c7 cd"  data-theme="c">300元</label>
			<input type="radio" class="cd"  name="Price" value="500" id="c8">
			<label for="c8" class="c8 cd" data-theme="c">500元</label>
		</fieldset>
	    <br />
        <label for="card_no" >充值卡卡号(15位)</label>
        <input type="number" name="card_no" id="card_no"   value="" placeholder="充值卡卡号(15位)" data-theme="d" />
		 
		<label for="card_password" >充值卡密码(19位)</label>
        <input type="number" name="card_password" id="card_password"   value="" placeholder="充值卡密码(19位)" data-theme="d" />
	    <br />
			<input type="submit" value="立即充值"  data-icon="check" data-theme="b" >
			<input type="hidden" id="MerId"  name="MerId" value="" />
			<input type="hidden" id="OrderId"    name="OrderId" value="" />
			<input type="hidden" id="ProdName"    name="ProdName" value="" />
			<input type="hidden" id="EncString"    name="EncString" value="" />
			<input type="hidden" id="NoticeUrl"    name="NoticeUrl" value="" />
			<input type="hidden" id="PayType"    name="PayType" value="yeepay" />
			<input type="hidden" name="t_card_type" value="UNICOM" />
			<input type="hidden" id="AccountNo"    name="AccountNo" value="" />
		</form>
		<div data-role="popup" id="carddeno_popup" class="ui-content" data-theme="e" style="max-width:350px;">
	          <p>请选择您的充值卡面额</p>
		</div>
		<div data-role="popup" id="card_popup" class="ui-content" data-theme="e" style="max-width:350px;">
	          <p>请输入您的充值卡号</p>
		</div>
		<div data-role="popup" id="password_popup" class="ui-content" data-theme="e" style="max-width:350px;">
	          <p>请输入您的充值卡密码</p>
		</div>	
		<div data-role="popup" id="wrongOrder_popup" class="ui-content" data-theme="e" style="max-width:350px;">
	          <p>订单信息获取失败</p>
		</div>	
		<div data-role="popup" id="wrongCardNo_popup" class="ui-content" data-theme="e" style="max-width:350px;">
	          <p>充值卡卡号只能是数字</p>
		</div>
		<div data-role="popup" id="wrongCardPs_popup" class="ui-content" data-theme="e" style="max-width:350px;">
	          <p>充值卡密码只能是数字</p>
		</div>
		<div data-role="popup" id="shortCardNo_popup" class="ui-content" data-theme="e" style="max-width:350px;">
	          <p>充值卡卡号必须是15位</p>
		</div>
		<div data-role="popup" id="shortCardPs_popup" class="ui-content" data-theme="e" style="max-width:350px;">
	          <p>充值卡密码必须是19位</p>
		</div>
		<div data-role="popup" id="errorPrice_popup" class="ui-content" data-theme="e" style="max-width:350px;">
	          <p></p>
		</div>
		<br />
		<div id="notice">
			<p class="intro">温馨提示:</p>
			<p class="intro">1.支持中国联通全国通用充值卡.</p>
			<p class="intro">2.由于网络原因,充值到账可能有一定的延迟,请耐心等待.</p>
			<p class="intro">3.如在支付过程中出现任何问题,请拨打摩奇客服热线:4006-61-00-61</p>
		</div>
	</div>
</div>

</body>
</html>
